<template>
  <el-container>
    <el-header>
      <el-button
        plain
        @click="addRome"
      >创建房间</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <ul class="router-list">
          <li
            class="router-item"
            v-for="item in room_list"
            :key="item.id"
            @click="enterRoom(item.id)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </el-aside>
      <el-container> </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      room_list: []
    }
  },
  mounted () {
    this.$socket.on('room_list_out')
  },
  methods: {
    addRome () {
      let id = new Date().getTime()
      this.$socket.emit('create_room')
      this.$router.push({ name: 'nhwc', params: { id: id } })
    },
    enterRoom (id) {
      this.$socket.emit('join_room', id)
      this.$router.push({ name: 'nhwc', params: { id: id } })
    }
  },
  sockets: {
    room_list_out (data) {
      this.room_list = data.room_list
    },
    join_room_tips (data) {
      alert(data + '进入了房间')
    }
  }
}
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-container {
  height: 100%;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
  overflow: hidden;
}
.router-item {
  height: 40px;
  line-height: 40px;
  background-color: #ecf5ff;
  border-bottom: 1px solid #409eff;
  cursor: pointer;
}
.router-item:hover,
.router-item.act {
  background-color: #d9ecff;
}
</style>
